// const { Component } = require("react");


// class DemoA extends Component {
//   constructor(props) {
//     super(props)
//     this.state = {
//       num: 1
//     }
//   }
//   add() {
//     // React中，如何实现类似于Vue中的监听器？
//     // 答：1）componentDidUpdate  2）setState中的callback
//     // 使用setState中的callback有什么不足？
//     // 答：多个setState会合并，合并后，callback也是会有问题。
//     this.setState((state, props) => ({ num: state.num + 1 }), () => {
//       console.log(this.state.num + "变化了");
//       // todo...
//     })
//   }
//   render() {
//     console.log("render...");
//     let { num } = this.state;
//     return (
//       <div>
//         <h3>{num}</h3>
//         <button onClick={this.add.bind(this)}>+1</button>
//       </div>
//     )
//   }

//   componentDidUpdate() {
//     // console.log("数据变化了~");
//     console.log("componentDidUpdate...");
//   }

//   componentDidMount() {
//     console.log("componentDidMount...");
//   }
// }

// export default DemoA;

// -------------------------------------

const { Component } = require("react");


class DemoA extends Component {
  constructor(props) {
    super(props)
    this.state = {
      num: 1,
      count: 0
    }
  }
  add() {
    this.setState((state, props) => ({ num: state.num + 1 }))
  }
  render() {
    console.log("render...");
    let { num, count } = this.state;
    return (
      <div>
        <h2>类组件，更新了{count}次</h2>
        <h3>{num}</h3>
        <button onClick={this.add.bind(this)}>+1</button>
      </div>
    )
  }

  componentDidUpdate(props,state) {  // state旧的状态
    // 在componentDidUpdate中不能直接调用setState
    // this.setState(state => ({ num: state.num + 1 }))

    // 要想在componentDidUpdate中调用setState，需要给一个出口
    // 如果不给出口，直接爆栈
    if (state.count === this.state.count) {
      // 在componentDidUpdate中是可以调用setState
      // 前提是要给出口
      this.setState(state => ({count:state.count+1}))
    }

    console.log("componentDidUpdate...");
  }

  componentDidMount() {
    console.log("componentDidMount...");
  }
}

export default DemoA;
